<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="" class="ipt">
    <button class="btn">发送</button>
    <ul>
        <!-- <li>
            <input type="text">
            <p></p>
            <button>删除</button>
        </li> -->
    </ul>
    <script>
        // 作业2
        // https://jx.xuzhixiang.top/ 待办事项4个人接口
        // 留言板--调用接口-列表数据-添加数据（type）--删除数据 ---修改状态

        /*
            1-列表 

            2-发布
                给发布按钮添加点击事件，点击的时候获取输入框的值
                    调用发布接口-发布的标题传入 接口--
            删除
                行内事件-传入删除需要用的参数
                    <button onclick="delFn(${v.id})">删除</button>
                实现一个全局函数 -调用删除接口-重新加载列表    

            修改
                修改状态--
                    checkbox 监听 change 事件 行内事件
                     <input onchange="changeTypeFn(${v.id},${v.type})" type="checkbox" ${v.type == 1 ? 'checked' : ''}>
                实现一个全局函数 -调用修改接口-重新加载列表    

        
        */
        // 1-列表
        function loadTodosList() {
            // 调用列表接口-map遍历-li-》ul
            var xhr = new XMLHttpRequest()
            let url = 'http://jx.xuzhixiang.top/ap/api/todos/readlist.php?pagesize=5'
            xhr.open('get', url)
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    let str = ''
                    // 遍历的时候 利用 type属性做判断
                    // type 0 未完成--type1 完成--checked
                    obj.data.forEach(v => {
                        str += `<li>
                            <input onchange="changeTypeFn(${v.id},${v.type},'${v.title}')" type="checkbox" ${v.type == 1 ? 'checked' : ''}>
                            <p>${v.title}</p>
                            <button onclick="delFn(${v.id})">删除</button>
                        </li>`
                    })
                    document.querySelector('ul').innerHTML = str;
                }
            }
        }

        // 2-发布
        var todosCreateAPI = 'http://jx.xuzhixiang.top/ap/api/todos/create.php'

        // 给发布按钮添加点击事件，
        let btn = document.querySelector('.btn')
        let ipt = document.querySelector('.ipt')
        btn.onclick = function () {
            // 点击的时候获取输入框的值
            let title = ipt.value;
            // 记录 完成状态--模式9 
            let type = 0;
            // 调用发布接口-发布的标题传入 接口--
            let xhr = new XMLHttpRequest()
            let str = todosCreateAPI + '?title=' + title + '&type=' + type;
            console.log(str);
            xhr.open('get', str);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);
                    // location.reload()
                    // 发布成功以后，调用列表接口
                    loadTodosList()
                    ipt.value = ''
                }
            }

        }
        // 调用发布接口 - 发布的标题传入 接口--


        // 实现一个全局函数 -调用删除接口-重新加载列表  
        function delFn(id) {
            console.log(id);
            let deleteAPI = 'http://jx.xuzhixiang.top/ap/api/todos/delete.php?id=' + id;
            console.log(deleteAPI);
            // 调用删除接口-重新加载列表  
            let xhr = new XMLHttpRequest()
            xhr.open('get', deleteAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);
                    // 重新加载列表  
                    loadTodosList()
                }
            }

        }


        // 实现一个全局函数 -调用删除接口-重新加载列表    

        function changeTypeFn(id, currentType, title) {
            // 判断-如果是1 完成-  修改未完成0 
            let type = currentType == 1 ? 0 : 1;
            let url = `http://jx.xuzhixiang.top/ap/api/todos/update.php?id=${id}&type=${type}&title=${title}`
            let xhr = new XMLHttpRequest()
            xhr.open('get', url);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);
                    // -重新加载列表
                    loadTodosList()

                }
            }
        }

        loadTodosList()
    </script>

</body>

</html>